<template>
  <div style="padding: 16px;">
    <div
      style="font-size: 16px;font-weight: 600;color: #1D2129;margin-bottom: 16px;"
    >
    业余训练情况-国家高水平后备人才基地
    </div>
    <div
      style="background: #F3F3F3; width: 100%;height: 35px;line-height: 40px;display: flex;justify-content: space-between;"
    >
      <el-radio-group v-model="activeTab" size="small" @change="datalist">
        <el-radio-button label="1">总局青少司授予</el-radio-button>
        <el-radio-button label="2">总局项目中心授予</el-radio-button>
      </el-radio-group>
      <div style="display: flex">
        <div style="display: flex;align-items: center;">
          <div style="width: 20px;height: 20px;display: inline-block;background-color: #3f98ff;"></div>
          非集中</div>
        <div style="display: flex;align-items: center;">
          <div style="width: 20px;height: 20px;display: inline-block;background-color: #41B776;margin-left: 20px;"></div>
          非三集中</div>
      </div>
    </div>
    <div class="chart-container">
      <div class="chart-item">
      <div class="chart-label">体校数量<div style="font-size: 10px;"><span style="color: #3f98ff;">261</span><span style="margin-left: 10px;color: #41B776;">320</span></div></div>
      <div class="chart-bar-container">
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green" style="width: 40%;"></div>
          </div>
        </div>
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非三集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green2" style="width: 60%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item">
      <div class="chart-label">在训运动员数量<div style="font-size: 10px;"><span style="color: #3f98ff;">261</span><span style="margin-left: 10px;color: #41B776;">320</span></div></div>
      <div class="chart-bar-container">
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green" style="width: 40%;"></div>
          </div>
        </div>
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非三集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green2" style="width: 60%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item">
      <div class="chart-label">教练员数量<div style="font-size: 10px;"><span style="color: #3f98ff;">261</span><span style="margin-left: 10px;color: #41B776;">320</span></div></div>
      <div class="chart-bar-container">
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green" style="width: 40%;"></div>
          </div>
        </div>
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非三集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green2" style="width: 60%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item">
      <div class="chart-label">文化教师数量<div style="font-size: 10px;"><span style="color: #3f98ff;">261</span><span style="margin-left: 10px;color: #41B776;">320</span></div></div>
      <div class="chart-bar-container">
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非三集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green" style="width: 40%;"></div>
          </div>
        </div>
        <div style="display: flex; width: 100%;">
          <div style="width:80px;font-size: 10px;height: 14px;">非三集中</div>
          <div class="chart-bar">
            <div class="chart-bar-fill green2" style="width: 60%;"></div>
          </div>
        </div>
      </div>
    </div>
    </div>

    <!-- <div style="display: flex;">
      <div
        style="height: 296px;width:50%;display: flex; border-left: 1px solid  rgba(129,129,129,0.15);"
      >
        <div ref="chart" style="height: 300px;width:100%"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getSheet1NationData } from "@/api/statistics";
export default {
  data() {
    return {
      date: new Date().getFullYear(),
      activeTab: 1
    };
  },

  mounted() {
    this.datalist();
  },
  methods: {
    async datalist(e) { 
      const res = await getSheet1NationData({
        year: this.date,
        type: e || this.activeTab
      });
      if (res.data) {
        console.log(res.data);
      }
      // const series = res.data.series;
      // const xAxis = res.data.xAxis;
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#41B776"
            }
          }
        },
        color: ["#41B776"],

        xAxis: [
          {
            type: "category",
            data: ["国家队", "省队", "地市级", "县级"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "级次数量",
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " ml";
              }
            },
            data: [20, 49, 70, 232]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option);

      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          this.chart.resize();
        }
      });

      ro.observe(this.$refs.chart);
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}
.chart-item {
  width: 49%;
  margin-bottom: 4px;
  margin-right: 4px;
  background-color: rgb(249, 249, 249);
  padding: 10px;
}
.chart-bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: Arial, sans-serif;
}
.chart-label {
  font-size: 12px;
  color: #0f0f0f;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart-bar {
  flex: 1;
  height: 15px;
  margin-bottom: 8px;
  background-color: #f0f0f0;
}
.chart-bar-fill {
  height: 100%;

  background-color: #3f98ff;
}
.chart-bar-fill.green {
  background-color: #3f98ff;
}
.chart-bar-fill.green2 {
  background-color: #41b776;
}
.chart-value {
  font-size: 18px;
  color: #3f98ff;

  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.chart-value.green {
  color: #3f98ff;
}
</style>
